<template>
  <div class="inspection">
    <div class="alarmImageCenter">
      <div class="imgHeght">
        <div
            v-for="(row, rowIndex) in grid"
            :key="rowIndex"
            class="row"
            :style="{ position: 'relative' }">
          <div
              v-for="(cell, cellIndex) in row"
              :key="cellIndex"
              class="cell"
              :style=" { width: '10px', height: '10px', borderRadius: '50%', position: 'absolute', top: `${rowIndex * 10}px`,left: `${cellIndex * 10}px`, backgroundColor: getColor(rowIndex,cellIndex)}"
              @click="pointEdit(rowIndex,cellIndex)"
              @mouseover="changeColor(rowIndex,cellIndex)"
              @mouseleave="resetColor"
              @mousemove.stop="handleCellClick(rowIndex,cellIndex)"
              @contextmenu.prevent.stop="rightClick(rowIndex,cellIndex)" />
        </div>
        <img :src="backgroundPlaneFigure" alt="" style="max-width: 100%;height: 450px;width: 750px;object-fit: contain">
      </div>
      <div
          v-for="(point, index) in points"
          :key="index"
          :style="{ top: `${point.x * 10}px`,left: `${point.y * 10}px`}"
          class="points"
          @click.stop="handlePointEdit(point)"
          @contextmenu.prevent.stop="handlePointClick(point)"
      >
        <div class="target">
          <img :src="/除湿机/.test(point.deviceName) ? dehumidifier : /空调/.test(point.deviceName) ? airCondition : /摄像头/.test(point.deviceName) ? camera : ''" alt="" width="20" height="20" style="margin-top: 5px;margin-left: -72px;">
          <span style="font-size: 12px;position: absolute;bottom: 10px;left: 36px">{{point.deviceName || '--'}}</span>
        </div>
      </div>
    </div>
    <div class="editDialogs">
      <el-dialog
          title="新增点位"
          v-dialog-drag
          :visible.sync="editTdzrmc"
          width="300px">
        <el-form
            ref="ruleForm"
            :model="ruleForm"
            label-width="80px"
            size="mini"
            class="searchForm"
        >
          <el-form-item prop="deviceName" label="设备名称">
            <el-input v-model="ruleForm.deviceName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="editTdzrmc=false">取消</el-button>
            <el-button type="primary" @click="getSave()">确认</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 平面图
      grid: Array.from({ length: 45 }, () => Array(75).fill(null)), // 创建一个13x28的网格
      camera: require('../assets/img/camera.png'),
      airCondition: require('../assets/img/airCondition.png'),
      dehumidifier: require('../assets/img/dehumidifier.png'),
      editTdzrmc: false,
      points: [
        { x: 20, y: 19, deviceName: '除湿机' },
        { x: 12, y: 45, deviceName: '摄像头-02' },
        { x: 34, y: 22, deviceName: '空调' },
        { x: 7, y: 34, deviceName: '摄像头-01' },
      ],
      statusLsit: [],
      ruleForm: {
        deviceName: '',
        xIndex: '',
        yIndex: '',
      },
      // backgroundPlaneFigure: require('../../assets/img/jinshan.jpg'),
      backgroundPlaneFigure: '',
      clickOperate: {
        x: '',
        y: '',
        deviceName: '',
        clickEdit: false,
        currentX: null,
        currentY: null,
      }
    }
  },
  methods: {
    getColor(rowIndex, cellIndex) {
      return this.currentX === rowIndex && this.currentY === cellIndex ? '#0cca64' : '';
    },
    changeColor(rowIndex, cellIndex) {
      this.currentX = rowIndex;
      this.currentY = cellIndex;
    },
    resetColor() {
      this.currentX = null;
      this.currentY = null;
    },
    // 平面图
    handleCellClick (rowIndex, cellIndex) {
      console.log('当前坐标：' + rowIndex, cellIndex)
    },
    rightClick (rowIndex, cellIndex) {
      if (parseInt(cellIndex) > 64) {
        return false
      } else {
        this.ruleForm = {
          deviceName: '',
          xIndex: '',
          yIndex: '',
        }
        this.ruleForm.xIndex = rowIndex
        this.ruleForm.yIndex = cellIndex
        this.editTdzrmc = true
      }
    },
    removeAaary(_arr, _obj) {
      var length = _arr.length;
      for (var i = 0; i < length; i++) {
        if (JSON.stringify(_arr[i]) == JSON.stringify(_obj)) {
          if (i == 0) {
            _arr.shift(); //删除并返回数组的第一个元素
            return _arr;
          }
          else if (i == length - 1) {
            _arr.pop();  //删除并返回数组的最后一个元素
            return _arr;
          }
          else {
            _arr.splice(i, 1); //删除下标为i的元素
            return _arr;
          }
        }
      }
    },
    handlePointClick (point) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.points = this.removeAaary(this.points,point)
        this.$message({
          type: 'success',
          message: '删除成功',
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消提交',
        })
      })
    },
    getSave () {
      if (!/空调|除湿机|摄像头/.test(this.ruleForm.deviceName)) {
        this.$message({
          type: 'warning',
          message: '填写内容请包含(空调/除湿机/摄像头)',
        })
        return false
      } else {
        this.points.push({
          x: this.ruleForm.xIndex,
          y: this.ruleForm.yIndex,
          deviceName: this.ruleForm.deviceName,
        })
        this.editTdzrmc=false
      }
    },
    handlePointEdit (point) {
      this.clickOperate = {
        x: point.x,
        y: point.y,
        deviceName: point.deviceName,
        clickEdit: true
      }
      setTimeout(() => {
        this.clickOperate.clickEdit = false
      },5000)
    },
    pointEdit (rowIndex,cellIndex) {
      if (this.clickOperate.clickEdit) {
        let kai = '是否将坐标（' + this.clickOperate.x + ',' + this.clickOperate.y + ')修改为坐标(' + rowIndex + ',' + cellIndex + ')'
        this.$confirm(kai, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.points.forEach(ele => {
            if (ele.deviceName === this.clickOperate.deviceName) {
              ele.x = rowIndex
              ele.y = cellIndex
            }
          })
          this.$message({
            type: 'success',
            message: '修改成功',
          })
          this.clickOperate.clickEdit = false
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交',
          })
          this.clickOperate.clickEdit = false
        })
      }
    }
  },
}
</script>
<style lang="css" scoped>
.alarmImageCenter{
  border-radius: 5px;
  border: solid 1px black;
  width: 752px;
  height: 450px;
  cursor: pointer;
}
.alarmImageCenter .points {
  position: absolute;
  border: 1px solid #0cca64;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  line-height: 10px;
  text-align: center;
  cursor: pointer;
  background: #0cca64;
  display: flex;
}
.alarmImageCenter .points .target{
  width: 105px;
  height: 30px;
  border-radius: 5px;
  position: absolute;
  top: -12px;
  right: -114px;
  background: #ccc;
}
.alarmImageCenter .imgHeght{
  width: 752px;
  height: 450px;
  position: relative;
  overflow: hidden;
}
.alarmImageCenter .imgHeght .row{
  display: flex;
  flex-direction: column;
}
.alarmImageCenter .imgHeght .row .cell{
  border: solid 1px #bd6666;
  cursor: pointer;
}
</style>

